import React, { Component } from 'react';
// 导入列表样式
import './List.scss'
// 导入api
import { index_nav} from '../utils/api'




class List extends Component {
   constructor(props){
       super(props);
       this.state = {  //定义组件状态
         arr:[ ]

       }
   }
  
componentDidMount(){
    // 发送导航请求
    index_nav().then((res)=>{
        console.log(res.data);
        this.setState(this.state.arr=res.data.list)
    })
}
    render() {
        return (
            
            <div className='list'>
            <h3>📢1分抵1元。请您点击此处查看《购物须知》。</h3>
            {
            //列表渲染，使用js中的map函数
            this.state.arr.map((item)=>{
             return(
                <div className='cate'>
                    <img src={item.pic} alt="" />
                    <div className='name'>{item.name}</div>
                </div>
             )

            })

            }
             <span className='sp1'></span>        

            </div>
        );
    }
}

export default List;